<<<<<<< HEAD
<template>
<view class="content">



    <view class="top">
     <view class="top-one">
     <image src="../../static/dingwei.png" alt="" id="dingwei">
     <text>杭州市梦想小镇</text>
     <image src="../../static/tixing.png" alt="" id="tixing">

     <input type="text" placeholder="永辉超市优惠商品" id="search-input">
     <image src="../../static/sousuo.png" alt="" id="sousuo">
    </view>
    <view class="top-two">
    <image src="../../static/imgs/assets/02.jpg" >
    </view>
    <view class="top-three">
      <view class="main">
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/super.png" mode=""/>
                <text>超市便利</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/market.png" mode=""/>
                <text>菜市场</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/fruits.png" mode=""/>
                <text>水果店</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/flower.png" mode=""/>
                <text>鲜花绿植</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/drug.png" mode=""/>
                <text>医药健康</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/home.png" mode=""/>
                <text>家居时尚</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/super.png" mode=""/>
                <text>烘焙蛋糕</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/sign.png" mode=""/>
                <text>签到</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/prestige.png" mode=""/>
                <text>大牌免运</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/red.png" mode=""/>
                <text>红包套餐</text>
            </view>
        </view>

    </view>
    </view>



    <view class="bottom">
    <view class="bottom-one">
        <text style="float: left;">附近店铺</text>
        <text style="float: right;">查看更多</text>
    </view>
    <view class="bottom-shop-one" v-for="(data,index) in data" :key="index" @click="gotoShopDetail(data._id)">
    <view class="bottom-shop-image">
        <image :src="data.imgUrl"></image>
    </view>
    <view class="bottom-shop-desc">
        <text style="font-size: 18px;font-weight: bold;">{{data.name}}</text>
        <br>
        <text style="font-size: 15px; font-weight: bold">月售: {{data.sales}}</text>
        <text style="font-size: 15px; font-weight: bold">起送: {{data.expressLimit}}</text>
        <text style="font-size: 15px; font-weight: bold">基础运费: {{data.expressPrice}}</text>
        <br>
        <text style="font-size: 15px; color: red">{{data.slogan}}</text>
    </view>
</view>

</view>
</view>

    




    
</template>

<script>
import config from '../../config';

export default {
    onShow() {
        // 检查本地是否存在 token
        const token = uni.getStorageSync('token');
        if (!token) {
            uni.redirectTo({ url: '/pages/login/index' });
        }
    },
    data() {
        return {
            title: '首页 ',
            data: []
        };
    },
    onLoad() {
        uni.request({
            url: config.URL + "/shop",
            method: 'GET',
            success: (res) => {
                this.data = res.data;
            },
            fail: (err) => {
                console.log("请求错误", err);
            }
        });
    },
    methods: {
        gotoShopDetail(id) {
            console.log(id);
            uni.navigateTo({
                url: `/pages/shopDetail/index?id=${id}`
            });
        }
    }
};    
</script>



<style scoped>
.bottom-shop-one,.bottom-shop-two {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #000;
}
.bottom-shop-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 10px;
}
.bottom-shop-image image {
    width: 100%;
    height: 100%;
}
.bottom-shop-desc {
    flex: 1;
}
.content{
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main {
    width: 100%;
    overflow: hidden;
}

.item {
    float: left;
    width: 20%; 
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.item img {
    display: block;
    margin: 0 auto 10px;
}
.main .item text{
    font-size: 13px;
}

.top-two image{
    width: 100%;
    height: 100%;
}

#sousuo{
    width: 20px;
    height: 20px;
    position: relative;
    top: -25px;
    left: 332px;
}
#search-input{
    width: 80%;
    height: 30px;
    margin-left: 10%;
    margin-top: 10px;
    border-radius: 15px;
    border: none;
    padding-left: 10px;
    background-color: #ffffff;
}
#dingwei{
    width: 30px;
    height: 30px;
}

#tixing{
    width: 30px;
    height: 30px;
    float: right;
}
.top-one{
    width: 100%;
    height: 100px;
    
}
.top-two{
    width: 100%;
    height: 100px;
    
}
.top{
    width: 100%;
    height: 405px;
     background-image: linear-gradient(to bottom, #1081f1, #e6f2ff);

}
.bottom{

    width: 100%;
    height: 365px;
    
}
</style>



=======
<template>
<view class="content">



    <view class="top">
     <view class="top-one">
     <image src="../../static/dingwei.png" alt="" id="dingwei">
     <text>杭州市梦想小镇</text>
     <image src="../../static/tixing.png" alt="" id="tixing">

     <input type="text" placeholder="永辉超市优惠商品" id="search-input">
     <image src="../../static/sousuo.png" alt="" id="sousuo">
    </view>
    <view class="top-two">
    <image src="../../static/imgs/assets/02.jpg" >
    </view>
    <view class="top-three">
      <view class="main">
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/super.png" mode=""/>
                <text>超市便利</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/market.png" mode=""/>
                <text>菜市场</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/fruits.png" mode=""/>
                <text>水果店</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/flower.png" mode=""/>
                <text>鲜花绿植</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/drug.png" mode=""/>
                <text>医药健康</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/home.png" mode=""/>
                <text>家居时尚</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/super.png" mode=""/>
                <text>烘焙蛋糕</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/sign.png" mode=""/>
                <text>签到</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/prestige.png" mode=""/>
                <text>大牌免运</text>
            </view>
            <view class="item">
                <image style="width: 50px;height: 50px;" src="../../static/imgs/assets/red.png" mode=""/>
                <text>红包套餐</text>
            </view>
        </view>

    </view>
    </view>



    <view class="bottom">
    <view class="bottom-one">
        <text style="float: left;">附近店铺</text>
        <text style="float: right;">查看更多</text>
    </view>
    <view class="bottom-shop-one" v-for="(data,index) in data" :key="index" @click="gotoShopDetail(data._id)">
    <view class="bottom-shop-image">
        <image :src="data.imgUrl"></image>
    </view>
    <view class="bottom-shop-desc">
        <text style="font-size: 18px;font-weight: bold;">{{data.name}}</text>
        <br>
        <text style="font-size: 15px; font-weight: bold">月售: {{data.sales}}</text>
        <text style="font-size: 15px; font-weight: bold">起送: {{data.expressLimit}}</text>
        <text style="font-size: 15px; font-weight: bold">基础运费: {{data.expressPrice}}</text>
        <br>
        <text style="font-size: 15px; color: red">{{data.slogan}}</text>
    </view>
</view>

</view>
</view>

    




    
</template>

<script>
import axios from 'axios';
    export default {
        onShow() {
    // 检查本地是否存在 token
    const token = uni.getStorageSync('token')
    if (!token) {
      uni.redirectTo({ url: '/pages/login/index' })
    }
  },
        data() {
            return {
                title: '首页 ',
                data: []
            }
        },
        onLoad() {
        axios.get("http://localhost:3000/shop").then(res => {
                
                this.data = res.data;

                

            }).catch(err => {
                console.log("请求错误",err)
            })
            
        },
    
        methods: {
        
            gotoShopDetail(id){
                console.log(id);
                uni.navigateTo({
                    url: `/pages/shopDetail/index?id=${id}`
                });
            }

        }
    }
</script>



<style scoped>
.bottom-shop-one,.bottom-shop-two {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #000;
}
.bottom-shop-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 10px;
}
.bottom-shop-image image {
    width: 100%;
    height: 100%;
}
.bottom-shop-desc {
    flex: 1;
}
.content{
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main {
    width: 100%;
    overflow: hidden;
}

.item {
    float: left;
    width: 20%; 
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
}

.item img {
    display: block;
    margin: 0 auto 10px;
}
.main .item text{
    font-size: 13px;
}

.top-two image{
    width: 100%;
    height: 100%;
}

#sousuo{
    width: 20px;
    height: 20px;
    position: relative;
    top: -25px;
    left: 332px;
}
#search-input{
    width: 80%;
    height: 30px;
    margin-left: 10%;
    margin-top: 10px;
    border-radius: 15px;
    border: none;
    padding-left: 10px;
    background-color: #ffffff;
}
#dingwei{
    width: 30px;
    height: 30px;
}

#tixing{
    width: 30px;
    height: 30px;
    float: right;
}
.top-one{
    width: 100%;
    height: 100px;
    
}
.top-two{
    width: 100%;
    height: 100px;
    
}
.top{
    width: 100%;
    height: 405px;
     background-image: linear-gradient(to bottom, #1081f1, #e6f2ff);

}
.bottom{

    width: 100%;
    height: 365px;
    
}
</style>



>>>>>>> a951c251b8a727f3f517ca1a33bd5d47f7de5751
